<template>
  <h2>父组件</h2>
  <hr />

  <!-- 具名插槽
  <div class="content">
    <box>
      <template v-slot:title>
        <span>热门游戏列表</span>
      </template>
    </box>
    <box>
      <template v-slot:content>
        <span>哎呦你干嘛，哎呦你干嘛，哎呦你干嘛。</span>
      </template>
    </box>
  </div> -->

  <h2>作用域插槽</h2>

  <game>
    <template v-slot="data">
      <div v-for="item in data.list" :key="item.id">{{ item.name }}</div>
    </template>
  </game>
</template>

<script setup>
// import box from '@/components/box.vue'
import game from '@/components/boxGame.vue'
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
}
</style>
